import React from 'react'
import { NavBar, Tabs} from 'antd-mobile'
import { ProductCard, Tag, Button } from 'react-vant';


function App() {
 
  return (
      <div>
          <NavBar>我的订单</NavBar>
          <Tabs>
          <Tabs.Tab title='全部订单' key='fruits'>
            <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>

            <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>

            <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>
            
          </Tabs.Tab>
          <Tabs.Tab title='待付款' key='vegetables'>
             <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>

            <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>

            <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='待发货' key='animals'>
              <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>

            <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>

            <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='待收货' key='dsh'>
              <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>

            <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>

            <div style={{margin: "10px 0"}}>
               <ProductCard
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品名称"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
             />
            </div>
          </Tabs.Tab>
        </Tabs>
      </div>
  )
}

export default App
